<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <th:block th:include="wx/include :: header('商城首页')" />
</head>
<header class='weui-header'>
  <div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" method="get" action="/wx/pro_list">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" id="searchInput" name="search" placeholder="搜索您想要的商品" required>
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
        <i class="weui-icon-search"></i>
        <span>搜索您想要的商品</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>
</header>
<body ontouchstart>
<div class='weui-content'>
  <!--新闻切换-->
  <div class="wy-ind-news">
    <i class="news-icon-laba"></i>
    <div class="swiper-container swiper-news">
      <div class="swiper-wrapper">
        <div class="swiper-slide" th:each="news : ${newsList}" ><a href="javascript:;" th:text="${news.newsName}">热烈祝贺车模商城成功上线</a></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <!--顶部轮播-->
  <div class="swiper-container swiper-banner">
    <div class="swiper-wrapper">
      <div th:each="carousel : ${carouselList}" class="swiper-slide">
        <a th:if="${carousel.goodsId==null||carousel.goodsId==''}" href="javascript:;"><img th:src=${carousel.carouselUrl}/></a>
        <a th:if="${carousel.goodsId!=null&&carousel.goodsId!=''}" th:href="${'/wx/pro_info/'+ carousel.goodsId}"><img th:src=${carousel.carouselUrl}/></a>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <!--精选推荐-->
  <div class="wy-Module">
    <div class="wy-Module-tit"><span>精选推荐</span></div>
    <div class="wy-Module-con">
      <div class="swiper-container swiper-jingxuan" style="padding-top:34px;">
        <div class="swiper-wrapper">
          <div class="swiper-slide" th:each="topGoods : ${topGoodsList}" >
            <a th:href="${'/wx/pro_info/' + topGoods.goodsId}"><img class="lazy" th:attr="data-original=${topGoods.mainImage}"/></a>
          </div>
        </div>
        <div class="swiper-pagination jingxuan-pagination"></div>
      </div>
    </div>
  </div>

  <div class="wy-Module">
    <div class="wy-Module-tit-line"><span>最近上架</span></div>
    <div class="wy-Module-con">
      <ul class="wy-pro-list clear">
        <li th:each="newGoods : ${newGoodsList}" >
          <a th:if="${newGoodsStat.index < 4}" th:href="${'/wx/pro_info/' + newGoods.goodsId}">
            <div class="proimg"><img th:src="${newGoods.mainImage}"/></div>
            <div class="protxt">
              <div class="name" th:text="${newGoods.goodsName}"></div>
              <div class="wy-pro-pri">
<!--                ¥<span th:text="${newGoods.price}">#</span>-->
                <em class="num font-15" style="font-size: medium" th:text="'¥' + ${newGoods.price}"></em>
                &nbsp;&nbsp;<em class="num font-12" style="text-decoration: line-through;color:#999999;" th:text="'原价：¥' + ${newGoods.originalPrice}"></em>
                <span style="float: right;color:#999999;font-size: 12px;"><em th:text="${newGoods.volume}"></em>人付款</span>
              </div>
              <p class="weui-media-box__desc" th:text="${newGoods.description}"></p>
              <div class="promotion-message clear">
                <i class="yhq" th:each="keyword : ${newGoods.keywordsList}"><span class="label-text" th:text="${keyword}">精品推荐</span></i>
              </div>
            </div>
          </a>
          <a th:if="${newGoodsStat.index > 3}" th:href="${'/wx/pro_info/' + newGoods.goodsId}">
            <div class="proimg"><img class="lazy" th:attr="data-original=${newGoods.mainImage}"/></div>
            <div class="protxt">
              <div class="name" th:text="${newGoods.goodsName}"></div>
              <div class="wy-pro-pri">
                <!--                ¥<span th:text="${newGoods.price}">#</span>-->
                <em class="num font-15" style="font-size: medium" th:text="'¥' + ${newGoods.price}"></em>
                &nbsp;&nbsp;<em class="num font-12" style="text-decoration: line-through;color:#999999;" th:text="'原价：¥' + ${newGoods.originalPrice}"></em>
                <span style="float: right;color:#999999;font-size: 12px;"><em th:text="${newGoods.volume}"></em>人付款</span>
              </div>
              <p class="weui-media-box__desc" th:text="${newGoods.description}"></p>
              <div class="promotion-message clear">
                <i class="yhq" th:each="keyword : ${newGoods.keywordsList}"><span class="label-text" th:text="${keyword}">精品推荐</span></i>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<th:block th:include="wx/include :: foot-black" />
<th:block th:include="wx/include :: footer" />

<script>

    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn"});
    });

	$(".swiper-banner").swiper({
        loop: true,
        autoplay: 3000
      });
	$(".swiper-news").swiper({
		loop: true,
		direction: 'vertical',
		paginationHide :true,
        autoplay: 30000
      });
     $(".swiper-jingxuan").swiper({
        pagination: '.swiper-pagination',
        loop: true,
        paginationType:'fraction',
        slidesPerView:3,
        paginationClickable: true,
        spaceBetween: 2
      });
</script>
</body>
</html>
